import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    width: 1800
    height: 700

    property real canvasWidth: 1800
    property real canvasHeight: 400

    // 图形属性数据模型（除结束角度外，其他初始值均为0）
    ListModel {
        id: shapeModel
        ListElement {
            x: 0               // 起始X坐标初始值0
            y: 0               // 起始Y坐标初始值0
            radius: 0          // 半径初始值0
            startAngle: 0      // 起始角度初始值0
            endAngle: 360      // 结束角度保持初始值360
        }
    }

    // 画布区域
    Rectangle{
        anchors.top: parent.top
        width: canvasWidth
        height: canvasHeight
        color: "black"

        Canvas{
            id: canvasPainter
            width: canvasWidth
            height: canvasHeight

            property real test_X_Position
            property real test_Y_Position

            MouseArea {
                anchors.fill: parent
                onClicked :function(mouse) {
                    canvasPainter.test_X_Position = mouse.x
                    canvasPainter.test_Y_Position = mouse.y
                    canvasPainter.requestPaint();
                }
            }

            onPaint: {
                const pen = getContext("2d");
                pen.clearRect(0, 0, canvasWidth, canvasHeight);

                // 绘制蓝色矩形
                pen.strokeStyle = "blue";
                pen.lineWidth = 5;
                pen.strokeRect(200, 100, 1000, 200);

                // 绘制鼠标控制的白色圆形
                pen.beginPath();
                pen.arc(test_X_Position, test_Y_Position, 60, 0, 2 * Math.PI, false);
                pen.strokeStyle = "white";
                pen.lineWidth = 4;
                pen.stroke();

                // 绘制ListView中的图形
                pen.strokeStyle = "red";
                pen.lineWidth = 3;
                for (let i = 0; i < shapeModel.count; i++) {
                    const item = shapeModel.get(i);
                    if (item.radius <= 0) {
                        continue;
                    }
                    const startRad = item.startAngle * Math.PI / 180;
                    const endRad = item.endAngle * Math.PI / 180;
                    pen.beginPath();
                    pen.arc(item.x, item.y, item.radius, startRad, endRad, false);
                    pen.stroke();
                }
            }
        }
    }

    // 控制区域
    Column {
        anchors.top: parent.top
        anchors.topMargin: canvasHeight + 10
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 10

        // 添加新图形按钮（新增元素除结束角度外初始值均为0）
        Button {
            text: qsTr("添加圆形")
            onClicked: {
                shapeModel.append({
                    x: 0,               // 新增元素起始X坐标初始值0
                    y: 0,               // 新增元素起始Y坐标初始值0
                    radius: 0,          // 新增元素半径初始值0
                    startAngle: 0,      // 新增元素起始角度初始值0
                    endAngle: 360       // 新增元素结束角度保持360
                });
                canvasPainter.requestPaint();
            }
        }

        // ListView列表
        ListView {
            id: shapeListView
            width: 1200
            height: 200
            model: shapeModel
            spacing: 5

            delegate: RowLayout {
                width: shapeListView.width
                spacing: 15

                // 起始X坐标标签+输入框
                Text {
                    text: "起始X坐标:"
                    Layout.minimumWidth: 80
                    verticalAlignment: Text.AlignVCenter
                }
                TextField {
                    Layout.minimumWidth: 80
                    inputMethodHints: Qt.ImhFormattedNumbersOnly
                    text: shapeModel.get(index).x
                    onTextChanged: {
                        const value = parseFloat(text) || 0;
                        shapeModel.setProperty(index, "x", value);
                        canvasPainter.requestPaint();
                    }
                }

                // 起始Y坐标标签+输入框
                Text {
                    text: "起始Y坐标:"
                    Layout.minimumWidth: 80
                    verticalAlignment: Text.AlignVCenter
                }
                TextField {
                    Layout.minimumWidth: 80
                    inputMethodHints: Qt.ImhFormattedNumbersOnly
                    text: shapeModel.get(index).y
                    onTextChanged: {
                        const value = parseFloat(text) || 0;
                        shapeModel.setProperty(index, "y", value);
                        canvasPainter.requestPaint();
                    }
                }

                // 半径标签+输入框
                Text {
                    text: "半径:"
                    Layout.minimumWidth: 80
                    verticalAlignment: Text.AlignVCenter
                }
                TextField {
                    Layout.minimumWidth: 80
                    placeholderText: "(≤0不显示)"
                    inputMethodHints: Qt.ImhFormattedNumbersOnly
                    text: radius
                    onTextChanged: {
                        const value = parseFloat(text) || 0;
                        shapeModel.setProperty(index, "radius", value);
                        canvasPainter.requestPaint();
                    }
                }

                // 起始角度标签+输入框
                Text {
                    text: "起始角度(°):"
                    Layout.minimumWidth: 100
                    verticalAlignment: Text.AlignVCenter
                }
                TextField {
                    Layout.minimumWidth: 100
                    inputMethodHints: Qt.ImhFormattedNumbersOnly
                    text: startAngle
                    onTextChanged: {
                        const value = parseFloat(text) || 0;
                        shapeModel.setProperty(index, "startAngle", value);
                        canvasPainter.requestPaint();
                    }
                }

                // 结束角度标签+输入框
                Text {
                    text: "结束角度(°):"
                    Layout.minimumWidth: 100
                    verticalAlignment: Text.AlignVCenter
                }
                TextField {
                    Layout.minimumWidth: 100
                    inputMethodHints: Qt.ImhFormattedNumbersOnly
                    text: endAngle
                    onTextChanged: {
                        const value = parseFloat(text) || 360;
                        shapeModel.setProperty(index, "endAngle", value);
                        canvasPainter.requestPaint();
                    }
                }

                // 删除按钮
                Button {
                    text: "删除"
                    Layout.alignment: Qt.AlignRight
                    onClicked: {
                        shapeModel.remove(index);
                        canvasPainter.requestPaint();
                    }
                }
            }

            ScrollIndicator.vertical: ScrollIndicator {}
        }
    }
}
